<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading :grade="'1'">财务管理</e-heading>
      <el-row>
        <el-form ref="form" v-bind="getFormProps()">
          <el-col :span="7">
            <el-date-picker
              size="small"
              placeholder="请选择时间段"
              v-model="timerg"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
          <el-col :span="10">
            <el-input size="small" placeholder="请输入搜索内容" v-model.trim="query.keyWord"  class="search-input"/>
            <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
          </el-col>
        </el-form>
      </el-row>
      <DataStatics :data="data" style="margin: 20px 0;">
      </DataStatics>

      <el-row style="margin: 20px 0;">
        <el-col :span="4"  class="fr">
          <el-button class="fr"  size="small" @click="exportExcel">导出</el-button>
        </el-col>
      </el-row>

      <el-table :data="list.list" style="width: 100%">
        <el-table-column
          prop="studentName"
          label="姓名">
          <template slot-scope="scope">
            <span class="hidden">{{scope.row.studentName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="saleUserName"
          label="销售人员">
          <template slot-scope="scope">
            <span class="hidden" :title="scope.row.saleUserName">{{scope.row.saleUserName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="auditStatusDes"
          label="到款状态"
          sortable>
        </el-table-column>
        <el-table-column
          prop="transactTime"
          label="办理时间"
          sortable>
          <template slot-scope="scope">
            <span>{{new Date(scope.row.transactTime).format()}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="signupFee"
          label="收款金额"
          sortable>
          <template slot-scope="scope">
            {{scope.row.signupFee| formatMoney}} 
          </template>
        </el-table-column>
        <el-table-column
          prop="payTypeDes"
          label="收款来源"
          sortable>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button class="link btn-txt" type="text" size="mini" :disabled="scope.row.auditStatus==1" @click="openDialog(scope.row)">确认收款</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-bind="getPaginationProps(list)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>

    <el-dialog
      top="30%"
      :visible.sync="dialogVisible"
      title="确认收款？">
      <el-row class="dlg-row">
        <el-col :span="4">
          <label>收款金额：</label>
        </el-col>
        <el-col :span="6">
          <p v-if="selectedPerson">{{(selectedPerson.signupFee || '') | formatMoney}}</p>
        </el-col>
      </el-row>
      <el-row class="dlg-row">
        <el-col :span="4">
          <label>收款来源：</label>
        </el-col>
        <el-col :span="6">
          <p>{{selectedPerson.payTypeDes}}</p>
        </el-col>
      </el-row>
      <el-row class="dlg-row">
        <el-col :span="4">
          <label>姓&nbsp;&nbsp;名：</label>
        </el-col>
        <el-col :span="6">
          <p>{{selectedPerson.studentName}}</p>
        </el-col>
      </el-row>
      <el-row class="dlg-row">
        <el-col :span="4" >
          <label>手&nbsp;机&nbsp;号：</label>
        </el-col>
        <el-col :span="6">
          <p>{{selectedPerson.mobile}}</p>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible= false">取消</el-button>
        <el-button type="primary" @click="updatePayState()">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import validator from 'utils/validator'
  import {randomFromArr, downloadFile} from 'utils' // eslint-disable-line
  import { pagingList } from 'utils/mixins'
  import DataStatics from '../../components/DataStatics'
  import Api from 'api/train'
  export default {
    mixins: [pagingList],
    components: {
      DataStatics
    },
    created () {
    },
    watch: {
      timerg () {
        this.query.beginTime = +new Date(this.timerg[0]) || ''
        this.query.endTime = +new Date(this.timerg[1]) || ''
      }
    },
    data () {
      return {
        validator,
        rules: {},
        dialogVisible: false,
        data: [
          {
            label: '未到款',
            key: 'nonPaymentNum',
            value: 0,
            unit: '人'
          },
          {
            label: '已到款',
            key: 'alreadyPaidNum',
            value: 0,
            unit: '人'
          },
          {
            label: '新增',
            key: 'newAddNum',
            value: 0,
            unit: '人'
          },
          {
            label: '待确认收入',
            key: 'toBeConfirmedSum',
            value: 0,
            unit: '元'
          },
          {
            label: '收入',
            key: 'incomeSum',
            value: 0,
            unit: '元'
          }
        ],
        list: {},
        query: this.getQuery({
          orgUserId: '',
          beginTime: '',
          endTime: '',
          keyWord: ''
        }),
        timerg: '',
        selecteRange: '1',
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一天',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一周',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一个月',
              onClick (picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }
          ]
        },
        selectedPerson: {}
      }
    },
    methods: {
      openDialog (item) {
        this.selectedPerson = item
        this.dialogVisible = true
      },
      getDataStatics () {
        Api.financeDataStatistics({
          beginTime: this.$route.query.beginTime || '',
          endTime: this.$route.query.endTime || ''
        }).then((res) => {
          this.data.forEach(item => {
            for (let k in res.data) {
              if (item.key === k) {
                item.value = res.data[k]
              }
            }
          })
        })
      },
      fetch () {
        Api.financeList(this.query).then((res) => {
          this.list = res.data
        })
        this.getDataStatics()
      },
      updatePayState () {
        Api.financeUpdate({
          auditStatus: 1,
          id: this.selectedPerson.id
        }).then((res) => {
          this.fetch()
          this.dialogVisible = false
        })
      },
      exportExcel () {
        let startDate = this.$route.query.startDate || ''
        let endDate = this.$route.query.endDate || ''
        let keyWord = this.$route.query.keyWord || ''
        let url = `/api/train/finance/export?startDate=${startDate}&endDate=${endDate}&keyWord=${keyWord}`
        let date = new Date().format('yyyyMMdd')
        let _this = this
        downloadFile(url, `财务到账${date}.xls`, function (blob) {
          _this.$message({
            message: '下载出错，请稍后再试',
            type: 'warning'
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>

.search-input{
  width: 200px;
}
</style>
<style lang="scss">
.dlg-row{
  margin-bottom: 10px;
  .el-col-4{
    text-align:right;
  }
}
</style>
